<template>
    <div style="width: 1200px;height: 1920px;margin: 0 auto">
      <div style="width: 1200px;border: 1px solid rgb(229,229,229);margin-top: 50px;padding: 0">
        <el-row :gutter="10" style="margin-top: 20px">
          <el-col :span="2" style="width: 50px;margin-left: 10px">品牌:</el-col>

          <el-col :span="22" style="text-align: justify">
            <a href="javascript:void (0)" v-for="item in movieName">
              {{ item.name }}</a>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <!-- 行政区-->
        <el-row :gutter="10">
          <el-col :span="2" style="text-align: center;width: 70px;margin-left: 10px">行政区:</el-col>

          <el-col :span="22" style="text-align:justify">
            <a href="javascript:void (0)" v-for="item in regionArr"  @click="handleClick(item)">
              {{item}}
            </a>
            <!--点击后出现对应的内容-->
            <div style="border: 1px solid #999999;width: 900px;margin-top: 10px;margin-left: 50px;padding: 15px"
                 v-if="selectedItem && selectedItem.content">

              <a href="javascript:void (0)">{{ selectedItem.content }}</a>
            </div>

          </el-col>

        </el-row>
        <el-divider></el-divider>
        <!--  影厅类型-->
        <el-row :gutter="10">
          <el-col :span="2" style="text-align: center;width: 80px;margin-left: 10px">影厅类型:</el-col>
          <el-col :span="22" style="text-align:justify">
            <a href="javascript:void (0)" v-for="(item,i) in hallArr" :key="i">{{item}}</a>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <!--影厅服务-->
        <el-row :gutter="10">
          <el-col :span="2" style="width: 80px;margin-left: 10px">影厅服务:</el-col>
          <el-col :span="22" style="margin-bottom: 10px;text-align: left">
            <a href="javascript:void (0)" v-for="item in servicesArr">{{item}}</a>
          </el-col>
        </el-row>
      </div>
      <div>
        <el-row :gutter="20" style="margin-top: 30px">
          <el-col :span="1" style="width: 10px">
            <div style="background-color:red;width:10px;height: 23.75px"></div>
          </el-col>
          <el-col :span="21" style="font-size:18px;font-weight: bold;text-align: left">影院列表</el-col>
          <!--筛选框-->
          <el-col :span="2" style="height: 24px;float: right">
            <span style="text-align: center">
            <img src="https://p1.meituan.net/scarlett/af58aa7b387e1c4d26797f027733ace2309.png">
              <el-dropdown>
                  <el-button type="primary"
                             style="background-color: white;color: #999999;width: 14px;height: 14px;border: none;padding: 0px;">筛选</el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>价格低</el-dropdown-item>
                    <el-dropdown-item>距离近</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
         </span>

          </el-col>
        </el-row>
      </div>
      <!-- 详细的影院列表-->
      <el-row style="padding: 20px;text-align: left"  v-for="item in movieList">

        <el-col :span="20">
          <a href=""style="margin: 0 auto;padding: 0;font-size:16px;">{{item.name}}</a>
          <p style="color: #999999">地址:{{item.address}}</p>
          <p>
          <span v-for="i in 3"
                style="border: 1px solid #509fc9;font-size: 12px;padding: 0px 2px 0px 2px;color:#509fc9;width: 36px;margin: 5px;border-radius: 3px">
            {{item.label}}
          </span>
          </p>
          <el-divider></el-divider>
        </el-col>

        <el-col :span="4">
          <el-row :gutter="20">
            <el-col :span="10">
              <p style="font-size: 16px;height: 45px;margin: 0 auto;color: red;float: right">￥{{item.price}}<span
                  style="font-size: 10px;color:#999;margin:2px">起</span></p>
              <p style="margin:0 auto;color:#999;float: right">{{item.distance}}km</p>
            </el-col>
            <el-col :span="14">
              <el-button type="danger" round="true" style="width: 100px;height: 35px;">选座购票</el-button>
            </el-col>
          </el-row>

        </el-col>

      </el-row>


      <!--  分页组件-->
      <el-pagination background="true" layout="prev, pager, next" :total="250"
                     style="text-align: center;" prev-text="上一页"
                     next-text="下一页">
      </el-pagination>

    </div>
</template>

<script>

export default {
  name: 'CinemaIndexView',
  data() {
    return {
      selectedItem:null,
      movieName: [{name: "全部"}, {name: "保利万和国际影城",content:"一号线"}, {name: "万达影城"}, {name: "UME国际影城",content:"一号线"}, {name: "上影国际影城"},
        {name: "横店影视"}, {name: "金逸影城"}, {name: "大地影院"}, {name: "太平洋电影城"}, {name: "哈拉少影城"},{name: "完美世界影城"}, {name: "CGV影城"},{name: "CGV影城"},
        {name: "CGV影城"},{name: "CGV影城"},{name: "CGV影城"},{name: "CGV影城"}],


      regionArr:["全部","地铁附近", "渝北区", "沙坪坝区", "九龙坡区", "江北区", "渝中区", "南岸区", "万州区", "江津区", "巴南区", "涪陵区", "北碚区", "大足区", "开州区", "永川区", "荣昌区", "合川区","大渡口区", "綦江区", "潼南区", "铜梁区", "璧山区", "云阳县", "石柱土家族自治县", "秀山土家族苗族自治县", "黔江区", "南川区", "丰都县","忠县","酉阳土家族苗族自治县", "长寿区", "垫江县", "武隆区", "梁平区", "巫山县", "奉节县", "彭水苗族土家族自治县", "城口县", "巫溪县"],



      hallArr:["全部","IMAX厅","CGS中国巨幕厅","杜比全景声厅","Dolby Cinema厅","RealD厅 RealD","6FL厅","LUXE巨幕厅","DTS:X临境音厅","4D厅","儿童厅","ALPD Pro高亮厅","MX4D厅 激光厅","CINITY厅"," 120帧/4K厅 ","60帧厅","4DX厅","4K厅"],
      servicesArr:["全部","可退票","可改签"],
      movieList:[{name:"UME影城（两江西奥）",address:"渝北区奥特莱斯路1号西部奥特莱斯内",label:"折扣",price:"33.9",distance:"18"},
        {name:"UME影城（两江西奥）",address:"渝北区奥特莱斯路1号西部奥特莱斯内",label:"折扣",price:"33.9",distance:"18"},
        {name:"UME影城（两江西奥）",address:"渝北区奥特莱斯路1号西部奥特莱斯内",label:"折扣",price:"33.9",distance:"18"},
        {name:"UME影城（两江西奥）",address:"渝北区奥特莱斯路1号西部奥特莱斯内",label:"折扣",price:"33.9",distance:"18"},
        {name:"UME影城（两江西奥）",address:"渝北区奥特莱斯路1号西部奥特莱斯内",label:"折扣",price:"33.9",distance:"18"},
        {name:"UME影城（两江西奥）",address:"渝北区奥特莱斯路1号西部奥特莱斯内",label:"折扣",price:"33.9",distance:"18"},
        {name:"UME影城（两江西奥）",address:"渝北区奥特莱斯路1号西部奥特莱斯内",label:"折扣",price:"33.9",distance:"18"},
        {name:"UME影城（两江西奥）",address:"渝北区奥特莱斯路1号西部奥特莱斯内",label:"折扣",price:"33.9",distance:"18"},
        {name:"UME影城（两江西奥）",address:"渝北区奥特莱斯路1号西部奥特莱斯内",label:"折扣",price:"33.9",distance:"18"},
        {name:"UME影城（两江西奥）",address:"渝北区奥特莱斯路1号西部奥特莱斯内",label:"折扣",price:"33.9",distance:"18"},
        {name:"UME影城（两江西奥）",address:"渝北区奥特莱斯路1号西部奥特莱斯内",label:"折扣",price:"33.9",distance:"18"},]
    }
  },

  methods: {
    handleClick(item) {
      if (item.content) {
        this.selectedItem = item;
      } else {
        this.selectedItem = null;
      }
    },
  },

}

</script>

<style>

a:focus {
  border-radius: 20px;
  border: 1px solid #ef4238;
  background: #f34d41;
  color: #fff;
}
a{
  display:inline-block;
  margin-right: 12px;
  padding: 3px 9px;
  text-decoration: none;color: black;

}
a:hover{
  color: #ef4238;
}


</style>
